A web browser will display plain text without regard to formatting,
all line breaks, spaces and tabs are rendered as single spaces. It is
up to your HTML to tell the browser about formatting. Last month we
looked at the <Hn> tag to present text headings in larger or bolder
type, and the <P> and <BR> tags to break text up into paragraphs.

However, there are times when you want to make particular text
standout from the rest, either by physical separation or by altered
appearance, and HTML provides a range of ways of altering text
display. These fall into three main categories; formatting tags, style
tags and font tags.


Text formatting

Text is normally left justified, the <DIV> tag allows you to align
text centrally on the page or flush with the right margin, and is more
flexible than the non-standard CENTER tag of Netscape. The usage is

<DIV ALIGN=setting>some text</DIV>

where "setting" is LEFT, RIGHT or CENTER. Any other tags can appear
within the <DIV>...</DIV> container, you can include any other tags
within this, even the whole page. The ALIGN attribute also works with
the <Hn> heading tag, so centring headings is easy.

Sometimes you don't want the browser to reformat the text, you may be
importing some text that is already laid out, or simply wish to
include a large text file without having to add paragraph breaks
throughout. Text between <PRE> and </PRE> is displayed without any
layout changes, this is most useful when including some text from
elsewhere that you don't want or need to reformat.



Style tags

There are two types of style tag, logical and physical. Logical tags
are the original method, and the most flexible, they include tags such
as <EM> (emphasis, usually rendered as italics) and <STRONG> (strong
emphasis, usually shown bold). If you specifically want the text shown
as bold or italic, use the <B> or <I> tags. In many cases it won't
matter which you use, but be consistent, or your pages will look
strange in some browsers.

There are many other logical style tags, used to show sample output
from a program, or commands you should type in, or that the text is a
quotation. There are many others, although it's unlikely many people
use more than two or three, but they all use the same principle that
the tag flags the text as a particular type of text, rather than
specifying exactly how it should be displayed. This lets the page
author define a block of text as a quotation, for example, with the
<CITE> tag while letting the user set how his browser will show that
text.



Font tags

To satisfy the demand for more control by the author over how the
document is displayed, the <FONT> tag was introduced. This gives
control over size, colour and typeface, although none of the current
Amiga browsers support the typeface attribute. Both the size and
colour can be specified in two ways. Look in your browser settings and
you will see that you can specify seven text font sizes, 1 to 7 in
AWeb and IBrowse, -2 to 4 in Voyager. The normal text size is 3 (0 in
Voyager).

You use the size attribute to specify the size absolutely with <FONT
SIZE="5"> or relative to the current size with <FONT SIZE="+2">. These
two will have the same result if you haven't previously modified the
font size, but using the first one a second time will still give size
5 text, whereas two instances of the second will give size 7. The
<FONT> tag is a container, it must have a closing </FONT> and only
affects the text between the two. You can also use the <BIG> and
<SMALL> tags to change the size of text, but these alter it by a
different amount on various browsers, so it's usually safer to use
<FONT>.

As well as changing the size, you can also change the colour of text
with <FONT COLOR="#rrggbb">some text</FONT> where rrggbb is a
hexadecimal colour number. Since many people are not comfortable
working with hexadecimal numbers (does anyone know the colour value
for azure without looking it up?) the HTML standard defines sixteen
standard colour names, listed in the box below. Most browsers
recognise a much larger set of colour names, but these sixteen are
standard. You can also specify shades of grey from gray0 (black) to
gray100 (white). There is a full list of the colours on the CD,
showing each colour with its name.

The SIZE and COLOR attributes can be combined for extra highlighting
like this:

This is normal text but <FONT SIZE="+3" COLOR=red>you can't miss me!</FONT>

<FONT> only affects text up to the closing </FONT>, what if you need
to change the text of a whole page? To change the text colour, use the
TEXT attribute of the <BODY> tag.

<BODY BGCOLOR=black TEXT=white>

will render the page in reverse, as white text on a black background.

The <BASEFONT> tag takes the same attributes as <FONT> but affects all
text that follows it, use this to change the default size for all
text.

<BODY BGCOLOR=black>
<BASEFONT SIZE="+1" COLOR=white>

will also render the entire page in reverse, but also increases the
size of the text because white on black is a little harder to read
than black on white.

When using coloured text, be careful that you don't overdo things and
make the page unreadable. In particular, make sure there is enough
contrast between the text and the background. The <BODY> tag has a
BGCOLOR attribute that specifies the background colour, using the same
colour numbers and names as <FONT>. HTML also allows you to
specify an image as a backdrop, to be covered next month, but the
reader may not have images enabled in his browser so you should still
specify a BGCOLOR when using a background image.







Changing link styles

So far we have only considered altering the style of the general text
of a page, but it is also possible to change the appearance of links.
Most of the time this is not a good thing, people get used to a link
appearing in a certain colour, changing this makes it less
recognisable as a link. But if you are changing the general text
colour, you may need to change the link colours to help the links
stand out. The attributes used are; LINK for unvisited links, VLINK
for visited links and ALINK for active links (the colour the link
changes to as you click on it). Most browsers use blue to show
links, so if you want your page to use blue for the body text you may
do something like

<BODY BGCOLOR=gray80 TEXT=darkblue LINK=red VLINK=blue>

Don't be tempted to make your link colour the same as the text colour,
pages designed like this can be difficult to follow since the links
are not obvious.





================================================================================



Boxouts
=======

Linking to other pages

A web page on it's own is of little use for most purposes. The web is
useful because of the way pages, sites and files can all be linked to
each other. The tag used to create a link is <A>, the anchor tag, and
uses the HREF attribute when linking to another page or file, like
this:

<A HREF="nextpage.html">Next page</a>
<A HREF="games/index.html">Index page of games directory</a>
<A HREF="http://www.wirenet.co.uk">A separate site</a>

The text between the <A> and </A> tags is highlighted in the browser
and will jump to the address given in HREF when you click on it. The
address used by HREF is relative to the current page, the first
example jumps to a page in the same directory, the second jumps to a
page in the games subdirectory of the current directory and the third
jumps to a completely different site, since it contains the full URL.

Most web servers run on Unix filesystems and there are a couple of
differences between Unix and AmigaDOS that you need to be aware of to
be sure that your pages will work from the server in the same was as
from your hard drive. The first is that Unix is case-sensitive,
NextPage.html and nextpage.html are different files in Unix, which has
caught a lot of people out when uploading their pages. The safest
approach is to keep everything in lower case.

The second difference is the way of specifying the parent directory.
On the page in the second example, you may want a link back to the
home page, the Amiga way of doing this is /index.html but Unix
uses .. to represent the parent, so the correct link is

<A HREF="../index.html>Return to Home Page</a>

It is usually a good idea to include such a link in most of your
pages, it makes life much easier for people viewing your site.




================================================================================



Text tags

Formatting tags

P paragraph break
BR line break
DIV a block of text for alignment
NOBR marks text to not be line wrapped
PRE display text as given, with no formatting by the browser
FONT use this font size and colour
BASEFONT specify font size and colour from here on


Logical tags

H1..H6 paragraph headings
EM emphasis
STRONG strong emphasis
ADDRESS an email address
CITE a quotation
BLOCKQUOTE a block of quoted text
CODE program code
KBD to be typed at the keyboard
SAMP sample output
VAR variable names
XMP example


Physical tags

BIG larger font
SMALL smaller font
B bold type
I italics
U underlined
STRIKE strike through
SUB subscript
SUP superscript
TT show in a monospaced font


================================================================================




Figure 1: These are the sixteen named colours defined in HTML, see the
file colours.html on the CD for the list of other colours available.


Figure 2: A typical display of FONT and Header sizes